<template>
  <div class="apply-process vux-1px-t">
    <div class="title">审批流程</div>
    <flexbox class="box" v-for="(item, index) in applyProcessData" :key="index">
      <flexbox-item :span="3" class="apply-date">{{item.ModifiedTime}}</flexbox-item>
      <flexbox-item :span="2" class="apply-header vux-1px-l" :class="index === applyProcessData.length - 1 ? item.MsgStatus : ''">
        <img :src="!item.Image ? require('../../assets/images/default-header.png') : item.Image" class="header-img">
      </flexbox-item>
      <flexbox-item :span="7" class="apply-msg">
        <p class="name">{{item.NameCh + ' ' + item.NameEn}}</p>
        <div class="remarkInner">
          <p class="message" :class="item.MsgStatus">{{item.Msg}}</p>
          <div v-if="item.Content && item.Content.remarks" class="checkInner">
            <flexbox>
              <flexbox-item :span="3" class="title_remark">意见：</flexbox-item>
              <flexbox-item :span="9" class="title_inner">{{item.Content.remarks}}</flexbox-item>
            </flexbox>
            <flexbox style="margin-top:3.5px">
              <flexbox-item :span="3" class="title_remark">附件：</flexbox-item>
              <flexbox-item :span="9" class="title_inner">
                <a :href="file" target="_blank" v-for="(file,i) in item.Content.files" :key="i">{{file.slice(file.indexOf("_")+1,file.length)}}</a>
              </flexbox-item>
            </flexbox>
          </div>
        </div>
      </flexbox-item>
    </flexbox>
  </div>
</template>

<script>
  import { Flexbox, FlexboxItem } from 'vux';
  export default {
    name: 'ApplyProcess',
    data () {
      return {
        applyProcessData: []
      };
    },
    props: ['processData', 'detailData'],
    components: {
      Flexbox,
      FlexboxItem
    },
    watch: {
      'processData': function (newVal, oldVal) {
        this.applyProcessData = newVal.concat();
        this.processDataInit();
      }
    },
    mounted () {
    },
    methods: {
      processDataInit: function () {
        this.applyProcessData.forEach((item, index) => {
          // 格式化日期
          if (item.ModifiedTime !== null) {
            item.ModifiedTime = item.ModifiedTime.replace('T', ' ').split('.')[0];
          }
          if (item.Status === 2) {
            let remark = '';
            if (item.Verify) {
              // 審批記錄 - 已審批 - 最終審核人
              remark = item.Remark === null ? '已通过' : `已通过，人事部备注：${item.Remark}`;
            } else {
              // 已審批
              remark = item.Remark === null ? '已通过' : `已通过，审批人备注：${item.Remark}`;
            }
            this.$set(this.applyProcessData[index], 'MsgStatus', 'pass');
            this.$set(this.applyProcessData[index], 'Msg', remark);
          } else if (item.Status === 3) {
            // 已駁回
            let turndownRemark = '';
            if (item.Verify) {
              turndownRemark = item.TurndownRemark === null ? '暂无提醒原因' : ('已提醒，提醒原因：　' + item.TurndownRemark);
            } else {
              turndownRemark = item.TurndownRemark === null ? '暂无驳回理由' : ('已驳回，驳回原因：　' + item.TurndownRemark);
            }
            this.$set(this.applyProcessData[index], 'MsgStatus', 'fail');
            this.$set(this.applyProcessData[index], 'Msg', turndownRemark);
          } else if (item.Status === 1) {
            this.$set(this.applyProcessData[index], 'MsgStatus', 'pending');
            if (item.Verify) {
              // 審批記錄 - 待審批 - 最終審核人
              this.$set(this.applyProcessData[index], 'Msg', '待人事部核实信息');
            } else {
              // 審批記錄 - 待審批 
              this.$set(this.applyProcessData[index], 'Msg', '待审批');
            }
          } else if (item.Status === 4) {
            // 審批記錄 - 已關閉
            this.$set(this.applyProcessData[index], 'MsgStatus', 'closed');
            this.$set(this.applyProcessData[index], 'Msg', '当前申请单状态已关闭');
          } else if (item.Status === 6) {
            this.$set(this.applyProcessData[index], 'MsgStatus', 'waitToCheck');
            if (item.Verify) {
              // 審批記錄 - 待審批 - 最終審核人
              this.$set(this.applyProcessData[index], 'Msg', '待人事部核实信息');
            } else {
              // 審批記錄 - 待查阅
              this.$set(this.applyProcessData[index], 'Msg', '待查阅');
            }
          } else if (item.Status === 7) {
            this.$set(this.applyProcessData[index], 'MsgStatus', 'checked');
            let remark = '';
            if (item.Verify) {
              // 審批記錄 - 已查阅 - 最終查阅人
              remark = item.Remark === null ? '已查阅' : `已查阅，人事部备注：${item.Remark}`;
            } else {
              // 已查阅
              remark = item.Content && item.Content.remarks === null ? '已查阅' : `已查阅`;
            }
            this.$set(this.applyProcessData[index], 'MsgStatus', 'checked');
            this.$set(this.applyProcessData[index], 'Msg', remark);
          }
        });
        // 加入申請人提交申請
        this.applyProcessData.unshift({
          Image: this.detailData.CreatedImage,
          NameCh: this.detailData.CreatedNameCh,
          NameEn: this.detailData.CreatedNameEn,
          StaffNo: this.detailData.CreatedStaffNo,
          Status: 2,
          MsgStatus: 'pass',
          Msg: '提交申請',
          ModifiedTime: this.detailData.CreatedTime.replace('T', ' ').split('.')[0]
        });
        // 如果是完成 則歸檔
        if (this.detailData.Status === 2) {
          // console.log('完成', this.detailData);
          let lastItem = this.applyProcessData[this.applyProcessData.length - 1];
          this.applyProcessData.push({
            ModifiedTime: lastItem.ModifiedTime,
            NameCh: this.detailData.Type === 1||this.detailData.Type === 5?'人事部已归档':this.detailData.Type === 2?'横琴交易管理部已归档':"行政部已归档",
            NameEn: '',
            Image: require('../../assets/images/return-file.png'),
            Msg: '完成',
            MsgStatus: 'pass'
          });
        } else if (this.detailData.Status === 5) {
          // let lastItem = this.applyProcessData[this.applyProcessData.length - 1];
          let cancelDate = '';
          if (this.detailData.CancelDateTime !== null) {
            cancelDate = this.detailData.CancelDateTime.replace('T', ' ').split('.')[0];
          }
          this.applyProcessData.push({
            Image: this.detailData.CreatedImage,
            NameCh: this.detailData.CreatedNameCh,
            NameEn: this.detailData.CreatedNameEn,
            StaffNo: this.detailData.CreatedStaffNo,
            Status: 5,
            Msg: '已取消申请',
            MsgStatus: 'cancel',
            ModifiedTime: cancelDate
          });
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import '../../assets/style/variable';
  .apply-process{
    padding: 0 15px;
    overflow: hidden;
    background: #fff;
    margin-bottom: getRem(60);
    &:before{
      left: 15px;
      border-color: #e6e6e6;
    }
    .title{
      font-size: getRem(32);
      border-left: getRem(8) solid #fc476d;
      padding-left: getRem(15);
      line-height: 1;
      margin: getRem(47) 0 getRem(40);
      font-weight: bold;
    }
    .apply-date{
      font-size: getRem(24);
      text-align: center;
      line-height: getRem(30);
      padding-top: getRem(40);
    }
    .apply-header{
      margin-left: 0 !important;
      height: getRem(205);
      position: relative;
      &:before{
        left: 50%;
        margin-left: -.5px;
        border-color: #f0f0f0;
      }
      &:after{
        content: "";
        width: getRem(20);
        height: getRem(20);
        position: absolute;
        top: getRem(113);
        left: 50%;
        margin-left: -(getRem(10));
        background: #bfc2c6;
        border-radius: 1000px;
      }
      &.pass:after{
        top: getRem(107);
        margin-left: -(getRem(16));
        background: #46c33b;
        border: getRem(6) solid #cfeecc;
      }
      &.waitToCheck:after{
        top: getRem(107);
        margin-left: -(getRem(16));
        background: #46c33b;
        border: getRem(6) solid #cfeecc;
      }
      &.checked:after{
        top: getRem(107);
        margin-left: -(getRem(16));
        background: #46c33b;
        border: getRem(6) solid #cfeecc;
      }
      &.fail:after{
        top: getRem(107);
        margin-left: -(getRem(16));
        background: #d91616;
        border: getRem(6) solid #f3caca;
      }
      &.pending:after{
        top: getRem(107);
        margin-left: -(getRem(16));
        background: #403f46;
        border: getRem(6) solid #dfddea;
      }
      &.cancel:after{
        top: getRem(107);
        margin-left: -(getRem(16));
        background: #fb5276;
        border: getRem(6) solid #feb2c2;
      }
      .header-img{
        display: block;
        width: getRem(80);
        height: getRem(80);
        border: .5px solid #ccc;
        border-radius: getRem(40);
        position: absolute;
        left: 50%;
        margin-left: -(getRem(42));
        z-index: 2;
      }
    }

    .box{
      align-items:flex-start ;
    }
    .apply-msg{
      flex: 0 0 calc(58.3333% - 7px) !important;
      margin-top: getRem(20);
      .name{
        font-size: getRem(28);
        margin-bottom: getRem(32);
        line-height: 1;
      }
      .remarkInner{
        background: #eee;
        position: relative;
        // &:after{
        //     content: "";
        //     width: 0;
        //     height: 0;
        //     position :absolute;
        //     left: -(getRem(25));
        //     top: 50%;
        //     margin-top: -(getRem(13));
        //     border: getRem(13) solid transparent;
        //     border-right-color: #eee;
        //   }
        .item_remark{
          padding: getRem(16) getRem(60) getRem(16) getRem(22);
          font-size: getRem(28);
          line-height: getRem(48);
          background: #eee;
          border-radius: getRem(4);
          // margin-bottom: getRem(32);
          // position: relative;
        }
        .message{
          padding: getRem(16) getRem(60) getRem(16) getRem(22);
          font-size: getRem(28);
          line-height: getRem(48);
          background: #eee;
          border-radius: getRem(4);
          position: relative;
          &:after{
            content: "";
            width: 0;
            height: 0;
            position :absolute;
            left: -(getRem(25));
            top: 50%;
            margin-top: -(getRem(13));
            border: getRem(13) solid transparent;
            border-right-color: #eee;
          }
          &:before{
            content: "";
            display: block;
            width: getRem(40);
            height: getRem(80);
            background: no-repeat center center;
            background-size: getRem(40) getRem(40);
            position: absolute;
            right: getRem(20);
            top: 50%;
            top: getRem(40);
            margin-top: -#{getRem(40)}
          }
          &.pass:before{
            background-image: url(../../assets/images/icon-status-success.png);
          }
          &.waitToCheck:before{
            background-image: url(../../assets/images/consulting_icon@2x.png);
          }
          &.checked:before{
            background-image: url(../../assets/images/consulted_icon@2x.png);
          }
          &.fail:before{
            background-image: url(../../assets/images/icon-status-error.png);
          }
          &.pending:before{
            background-image: url(../../assets/images/icon-status-pending.png);
          }
          &.closed:before{
            background-image: url(../../assets/images/icon-status-closed.png);
          }
          &.cancel:before{
            background-image: url(../../assets/images/icon-status-cancel.png);
          }
        }
        .checkInner{
          box-sizing: border-box;
          padding: getRem(2) getRem(10) getRem(13) getRem(22);
          margin-bottom: getRem(32);
          font-size: getRem(28);
          line-height: getRem(48);
          background: #eee;
          .vux-flexbox{
            // margin-bottom: getRem(10);
            align-items: flex-start;
            .title_remark{
              color: #666;
              font-family: PingFangSC-Regular;
              font-size: getRem(28);
              // line-height: getRem(18);
            }
            .title_inner{
              box-sizing: border-box;
              color: #333;
              padding-right: getRem(50);
	            font-family: PingFangSC-Regular;
	            font-size: getRem(28);
	            font-stretch: normal;
	            // line-height: getRem(40);
	            letter-spacing: getRem(1);
            }
            .vux-flexbox-item{
              margin: 0!important;
              a{
                width: 100%;
                // line-height: getRem(36);
                color: #333;
                margin-bottom: getRem(18);
                display: block;
                word-wrap: break-word;
                word-break: break-all;
                overflow: hidden;
              }
            }
          }
        }
      }
    }
  }
</style>
